<template>
  <div :style="{ height: ' 100rem' }">
    <div class="header" :style="{ backgroundColor: `rgb(${bgColor})` }">
      <div class="header-search">
        <div class="search" @click="$router.push('/search')">
          <img
            src="https://image-mall.gxptkc.com/m/resources/search.png"
            alt=""
          />
          <input type="text" placeholder="输入关键字搜索" />
        </div>
        <div class="msg">
          <img
            @click="showToast"
            src="https://image-mall.gxptkc.com/m/resources/index_message.png"
            alt=""
          />
        </div>
      </div>
      <div class="header-category">
        <div class="item-index">
          <span
            @click="
              toGoodsPage(false);
              activeId = 0;
              changeIndexTopBarId(0);
            "
            :class="{ active: activeId == 0 }"
            >首页</span
          >
          <img
            src="https://image-mall.gxptkc.com/m/resources/index/icon.png"
            alt=""
            v-if="activeId == 0"
          />
        </div>
        <div class="category-list" ref="topBar">
          <ul class="list">
            <li
              v-for="(item, index) in categoryList"
              :key="item.categoryId"
              @click="toGoodsList(item.categoryId, index)"
            >
              <span :class="{ active: activeId == index + 1 }">
                {{ item.categoryName }}
              </span>
              <img
                src="https://image-mall.gxptkc.com/m/resources/index/icon.png"
                alt=""
                v-if="index + 1 == activeId"
              />
            </li>
          </ul>
        </div>
        <div class="category">
          <img
            src="https://image-mall.gxptkc.com/m/resources/index/sort.png"
            alt=""
          />
          <span @click="toCategory">分类</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  data() {
    return {
      text: "",
      categoryList: [],
      goods: [],
      activeId: 0,
      token: null,
      islogined: false,
    };
  },
  computed: {
    ...mapState(["bgColor", "indexTopBarId"]),
  },
  methods: {
    showToast() {
      if (!this.islogined) {
        Toast("请登录！");
      } else {
        this.$router.push("/letter");
      }
    },
    toCategory() {
      this.$router.push({
        path: "/category",
      });
    },
    ...mapMutations([
      "toGoodsPage",
      "haveGoodsList",
      "keepIndexData",
      "changeIndexTopBarId",
    ]),
    toGoodsList(id, index) {
      this.changeIndexTopBarId(index + 1);
      this.activeId = index + 1;
      this.axios
        .get(
          "https://m-mall.gxptkc.com/v3/goods/front/goods/category/list?categoryId1=" +
            id
        )
        .then((res) => {
          this.goods = res.data.data.list.filter((o) => {
            return o.categoryId == id;
          });
          this.haveGoodsList(this.goods);
        });
      this.toGoodsPage(true);
    },
  },
  updated() {
    this.$refs.topBar.scrollLeft = (this.indexTopBarId - 1) * 67;
  },
  async created() {
    this.token = localStorage.getItem("fastCar-token");
    this.activeId = this.indexTopBarId;
    let res = await this.axios({
      method: "GET",
      url: "https://m-mall.gxptkc.com/v3/member/front/productLookLog/list?pageSize=10&current=1",
      headers: {
        authorization: `Bearer ${this.token}`,
        "content-type": "application/x-www-form-urlencoded",
      },
    });

    if (res.data.msg != "请登录") {
      this.islogined = true;
    }

    let categoryRes = await this.axios.get(
      "https://m-mall.gxptkc.com/v3/goods/front/goods/category/list"
    );
    this.categoryList = categoryRes.data.data.list;
  },
};
</script>

<style lang="scss" scoped>
.active {
  font-weight: bold;
}

.header {
  padding: 10rem 0;
  box-sizing: border-box;
  transition: all 0.8s;

  width: 100vw;
  height: 100rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;

  .header-search {
    padding: 0 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .search {
      border-radius: 20rem;
      overflow: hidden;
      background-color: #fff;
      display: flex;
      justify-content: left;
      align-items: center;

      img {
        width: 18rem;
        height: 18rem;
        margin-left: 10rem;
      }

      input {
        width: 75vw;
        height: 32rem;
        border: none;
      }
    }

    .msg {
      img {
        width: 25rem;
        height: 25rem;
      }
    }
  }

  .header-category {
    margin-top: 15rem;
    padding: 0 10rem;
    font-size: 16rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item-index {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      img {
        width: 14rem;
      }
    }

    .category-list {
      width: 65vw;
      overflow: auto;

      ul.list {
        width: 415vw;
        display: flex;
        align-items: center;

        li {
          // width: 24vw;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-right: 10rem;

          img {
            width: 14rem;
          }
        }
      }
    }

    .category {
      img {
        width: 16rem;
        margin-right: 3px;
      }
    }
  }
}
</style>